//1.创建vm对象
let vm = new Vue({
  //通过id="app"标签，获取vue页面
  el: "#app",
  //自定义语法
  delimiters: ['[[', ']]'],
  data() {
    return {
      user: {
        username: "",
        password: "",
        password2: "",
        mobile: "",
      },
      allowed: false,
      //错误提示
      errorName: false,
      errorNameMessage: "",
      errorPassword: false,
      errorPasswordMessage: "",
      errorPassword2: false,
      errorPassword2Message: "",
      errorMobile: false,
      errorMobileMessage: "",
      errorAllowed: false,
      errorAllowedMessage: "",
      errorCode: false,
      errorCodeMessage: "",
      errorShort: false,
      errorShortMSG: "",
      codeImg: '',//验证码图片
      uuid: '',//自动生成图形验证码需要的uuid
      code: '',//验证码
      shortMSG: '',//短信验证码
      shortMSGTip: '',//验证码按钮文字
      sendFlag:true,//true=可以发送验证码
    }
  },
  mounted() {
    this.shortMSGTip = "获取短信验证码"
    this.getCodeImg()
  },
  methods: {
    usernameBlur() {
      let reg = /^[a-zA-Z0-9_-]{3,20}$/
      if (reg.test(this.user.username)) {
        this.errorName = false
        //用户名重复判定
        axios.get('/username/' + this.user.username + '/count/', {responseType: 'json'})
          .then((resp) => {
            console.log("响应成功1：", resp)
            if (resp.data.count > 0) {
              this.errorNameMessage = "用户名已存在！"
              this.errorName = true
              console.log("??", this.errorName, this.errorNameMessage)
            }
          })
          .catch((e) => {
            console.log("请求异常：", e)
          })
      } else {
        this.errorName = true
        this.errorNameMessage = "请输入3-20个字符的用户名，不包含中文！"
      }
      console.log("姓名校验6-20字符：", this.user.username)
    },
    passwordBlur() {
      console.log("密码校验：", this.user.password)
      let reg = /^[0-9a-zA-Z]{6,20}$/
      if (reg.test(this.user.password)) {
        this.errorPassword = false
      } else {
        this.errorPassword = true
        this.errorPasswordMessage = "请输入6-20个字符的密码，不包含中文！"
      }
    },
    password2Blur() {
      console.log("确认密码校验：", this.user.password2)
      if (this.user.password == this.user.password2) {
        this.errorPassword2 = false
      } else {
        this.errorPassword2 = true
        this.errorPassword2Message = "两次输入的密码不一致，请重新输入！"
      }
    },
    mobileBlur() {
      console.log("手机号校验：", this.user.mobile)
      reg = /^1[3-9]\d{9}$/
      if (reg.test(this.user.mobile)) {
        this.errorMobile = false
        //手机号重复判定
        axios.get('/mobile/' + this.user.mobile + '/count/', {responseType: 'json'})
          .then((resp) => {
            console.log("响应成功：", resp)
            if (resp.data.count > 0) {
              this.errorMobile = true
              this.errorMobileMessage = "手机号已存在！"
            }
          })
          .catch((e) => {
            console.log("请求异常：", e)
          })
      } else {
        this.errorMobile = true
        this.errorMobileMessage = "请输入正确的手机号！"
      }
    },
    codeBlur() {
      let reg = /^[a-zA-Z0-9_-]{4}$/
      if (reg.test(this.code)) {
        this.errorCode = false
        // axios.get('/checkCode/' + this.code + '/' + this.uuid + '/count/', {responseType: 'json'})
        //   .then((resp) => {
        //     console.log("响应数据:", resp)
        //   })
        //   .catch((e) => {
        //     console.log("请求异常：", e)
        //   })
      } else {
        this.errorCode = true
        this.errorCodeMessage = "请填写完整的验证码"
      }
    },
    shortMSGBlur() {
      let reg = /^[0-9]{4}/
      if (reg.test(this.shortMSG)) {
        this.errorShort = false
      } else {
        this.errorShort = true
        this.errorShortMSG = "请输入短信验证码"
      }
    },
    sendShortMSG() {
      let that=this
      if(!this.sendFlag){
        return
      }
      if (!this.errorMobile && !this.errorCode) {
        let url = '/sendSMS/' + this.user.mobile + '/?code=' + this.code + '&uuid=' + this.uuid
        let header = {
          responseType: 'json'
        }
        axios.get(url, header).then((resp) => {
          console.log("响应成功：", resp)
          if (resp.data.code == '0') {
            this.errorShort=false
            let num=60
            //倒计时，一秒刷新，单位为毫秒：定时器欲要成为变量标识
            let time=setInterval(()=>{
              if(num==1){
                //删除定时器，需要传入一个定时器的标识
                clearInterval(time)
                this.shortMSGTip='获取短信验证码'
                this.sendFlag=true
                //TODO 删除redis中的图形验证码
                this.getCodeImg()
              }else{
                num-=1
                this.shortMSGTip=num+'秒'
                this.sendFlag=false
              }
            },1000)
          } else {
            //提示错误信息
            console.log("resp.data.code: ",resp.data.code)
            if(resp.data.code=='4000'){
              //验证码过期
              this.getCodeImg()
            }else if(resp.data.code=='4001'){
              //验证码错误
            }else if(resp.data.code=='4002'){
              //节流throttling（频繁调用发送短信接口）
            }else{
              //其他错误

            }
            this.errorShort=true
            this.errorShortMSG=resp.data.respMsg
          }
        }).catch((e) => {
          console.log("发送失败：", e.response)
        })
      }
    },
    allowedChange() {
      console.log("同意协议校验：", this.allowed)
      if (this.allowed) {
        this.errorAllowed = false
      } else {
        this.errorAllowed = true
        this.errorAllowedMessage = "请阅读并同意'美多商城用户协议！'"
      }
    },
    getCodeImg() {
      this.uuid = generateUUID()
      this.codeImg = '/getCode/' + this.uuid + '/'
      //不可使用axios，获取的是图片，会报错
      // axios.get('/getCode/' + this.uuid + '/').then((resp) => {
      //   console.log("获取成功：", resp)
      //   this.codeImg = resp
      // }).catch((e) => {
      //   console.log("获取验证码失败！", e)
      // })
    },
    save() {
      console.log("保存")
      this.usernameBlur()
      this.mobileBlur()
      this.passwordBlur()
      this.password2Blur()
      this.codeBlur()
      this.shortMSGBlur()
      this.allowedChange()

      if (this.errorName || this.errorPassword || this.errorPassword2 || this.errorMobile || this.errorCode || this.errorShort || this.errorAllowed) {
        //禁用表单提交时间
        window.event.returnValue = false
      }

      console.log("揍你")
    },
  }
})